<template>
   <div class="com-container ">
        <div class="title" :style="comStyle"  @click="showMenu = !showMenu" >
      <span class="before-icon">▎</span>
      <span>{{ showTitle }}</span>
      <span class="iconfont title-icon" :style="comStyle" >&#xe6eb;</span>
      <div class="select-con">
        <div class="select-item" v-show="showMenu" v-for="item in selectTypes" :key="item.key" @click="handleSelect(item.key)">
          {{ item.text }}
        </div>
      </div>
    </div>
      <div class="com-chart" ref='trend_ref'>11111</div>
  </div>
</template>

<script>
import '../assets/font/iconfont.css'
import { mapState } from 'vuex'


export default {
    name:'trend',
    data() {
        return {
            chartsInstance:null,
            allData:null,
            showMenu: false, // 是否显示可选项
            choiceType:'map',// 显示数据类型 
            titleFontSize:0 // 标题字体大小
        }
    },
    created() {
        // 当服务器发送数据过来 调用getData
        this.$socket.registerCallBack('trendData', this.getData) 
    },
    mounted() {
        this.initCharts()
        // this.getData()
        // 向服务器请求数据
        this.$socket.send({
            action:'getData',
            socketType:'trendData',
            chartName:'trend',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.screenAdapter)
        // 注销websocket接收方法
        this.$socket.unRegisterCallBack('trend')
    },
    computed:{
        ...mapState('theme'),
        selectTypes(){
            // 标题选项
            if(!this.allData){
                return []
            }else{
                return this.allData.type.filter(v=>{
                    return v.key!==this.choiceType
                })
            }
        },
        showTitle(){
            // 展示标题
            if(!this.allData) return ''
            return this.allData[this.choiceType].title
        },
        comStyle(){
            // 设置标题样式
            return {
                fontSize:this.titleFontSize + 'px'
            }
        }
    },
    methods: {
        initCharts(){
            this.chartsInstance = this.$echarts.init(this.$refs.trend_ref,'chalk')
            const initOpt={
                xAxis:{
                    type:'category',
                    boundaryGap:false
                },
                yAxis:{
                    type:'value'
                },
                tooltip:{
                    trigger:'axis'
                },
                legend:{
                    left:20,
                    top:'15%',
                    icon:'circle' // 原型图例
                },
                grid:{
                    top:'20%',
                    left:'3%',
                    right:'4%',
                    bottom:'1%',
                    containLabel:true
                }
            }
            this.chartsInstance.setOption(initOpt)
        },
       async getData(res){
            // 请求数据
            // const {data:res}=await this.$http.get('trend')
            this.allData = res
            // 更新
            this.updateCharts()
        },
        updateCharts(){
             // 半透明的颜色值
            const colorArr1 = ['rgba(11, 168, 44, 0.5)', 'rgba(44, 110, 255, 0.5)', 'rgba(22, 242, 217, 0.5)', 'rgba(254, 33, 30, 0.5)', 'rgba(250, 105, 0, 0.5)']
            // 全透明的颜色值
            const colorArr2 = ['rgba(11, 168, 44, 0)', 'rgba(44, 110, 255, 0)', 'rgba(22, 242, 217, 0)', 'rgba(254, 33, 30, 0)', 'rgba(250, 105, 0, 0)']

            let timeArr = this.allData.common.month // 类目数据
            let valueArr = this.allData[this.choiceType].data // y轴数据 series数据
            // 数据
            let seriesArr = valueArr.map((v,i)=>{
                return {
                    name:v.name,
                    type:'line',
                    data:v.data,
                    stack:this.choiceType, // 形成堆叠图
                    areaStyle:{
                        color:{
                            type:'linear', // 线性渐变
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops:[
                                {offset:0, color:colorArr1[i]}, // 0% 处为红色
                                {offset:1, color:colorArr2[i]}
                            ]
                        }
                    }
                }
            })
            // 图例
            const legendArr = valueArr.map(v=>{
                return v.name
            })

            const dataOpt={
                xAxis:{
                    data:timeArr
                },
                legend:{
                    data:legendArr
                },
                series:seriesArr
            }
            this.chartsInstance.setOption(dataOpt)
            this.chartsInstance.resize()
        },
        screenAdapter(){
            // 屏幕适配
            this.titleFontSize = this.$refs.trend_ref.offsetWidth/100*3
            const adapterOpt={
                legend:{
                    itemWidth:this.titleFontSize,
                    itemHeight:this.titleFontSize,
                    itemGap:this.titleFontSize
                }
            }
            this.chartsInstance.setOption(adapterOpt)
            this.chartsInstance.resize()
        },
        handleSelect(currentType){
            // 切换显示类型
            this.choiceType = currentType
            this.updateCharts()
        }
    },
      watch:{
        theme(){
            console.log('主题切换了');
            this.chartInstance.dispose() // 销毁图表对象
            this.initCharts() // 初始化图表对象
            this.screenAdapter() // 屏幕适配
            this.updateCharts() // 跟新图表
        }
    }
}
</script>

<style lang="less" scoped>
.title {
  position: absolute;
  left: 50px;
  top: 20px;
  z-index: 999;
  color: white;
  cursor: pointer;

  .before-icon {
    position: absolute;
    left: -20px;
  }
  .title-icon {
    margin-left: 10px;
  }
  .select-con {
      background: #222733;
  }
}
</style>